<template>
	<view class="Menu">
		<!-- 导航条 :style="{ height: $wanlshop.wanlsys().height + 'px' }"-->
		<view class="cu-custom">
			<view class="cu-bar fixed bg-bgcolor" :style="{
          height: $wanlshop.wanlsys().height + 'px',
          paddingTop: $wanlshop.wanlsys().top + 'px',
        }">
				<view class="action">
					<text class="wlIcon-fanhui1" style="margin-left: 0" @tap="$wanlshop.back(1)"></text>
				</view>
				<view class="content" :style="{ top: $wanlshop.wanlsys().top + 'px' }">
					套餐详情
				</view>

				<view class="action">
					<text class="wlIcon-fenxiang" @tap="showModal('share')"></text>
				</view>
			</view>
		</view>
		<!-- 内容 -->
		<view class="menuContent"></view>
		<view class="footer" @click="handleBuy">购买</view>
		<!-- 分享 -->
		<view class="cu-modal bottom-modal" :class="modalName == 'share' ? 'show' : ''" @tap="hideModal">
			<view class="cu-dialog" @tap.stop="">
				<wanl-shares :scrollAnimation="scrollAnimation" :shareTitle="goodsData.title"
					:shareText="goodsData.description" :image="$wanlshop.oss(goodsData.image, 50, 50)" :href="
            common.appConfig.domain +
            '/pages/newPage/setMenu?id=' +
            goodsData.id +
            '&QRtype=goods'
          " isReport @change="wanlShare" />
			</view>
		</view>
		<!-- 购买 -->
		<u-popup :show="modalNames">
			<image class="buyimg" src="@/static/images/index/image60.png" mode=""></image>
			<view class="cu-dialog" @tap.stop="">
				<image class="close" @click="handclose" src="@/static/images/index/close.png" mode=""></image>
				<view class="buybox">
					<view class="money">$500</view>

					<view class="buylist">
						xt账号
						<view class="">200xt</view>
					</view>
					<view class="buylist">
						已抵扣
						<view class="">¥200</view>
					</view>
					<view class="buylist">
						需支付
						<view class="pay">¥300</view>
					</view>
					<view class="pays">支付</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import {
		mapState
	} from "vuex";

	export default {
		components: {},
		data() {
			return {
				modalNames: true,
				windowHeight: 0,
				statusBar: 0,
				countdown: 3, // 修改广告倒计时
				cTimer: null,
				modalName: null, // 弹出层
				scrollAnimation: 100, //分享滚动
				goodsData: {
					title: "",
					description: "",
					id: "",
				},
			};
		},
		computed: {
			...mapState(["common"]),
		},
		onReady() {},
		onLoad() {},
		methods: {
			handleBuy() {
				this.modalNames = "buy";
			},
			wanlShare(e) {
				if (e) {
					this.$wanlshop.auth(
						`/pages/user/complaint/complaint?id=${this.goodsData.id}&type=3`
					);
				} else {
					this.modalName = null;
				}
			},
			handclose() {
				this.modalNames = false;
			},
			// 弹出层
			showModal(name) {
				// 滚动下分享
				if (name == "share" && this.modalName != "share") {
					setTimeout(() => {
						this.scrollAnimation = 0;
					}, 300);
				}
				this.modalName = name;
			},
			// 关闭弹出层
			hideModal(name) {
				if (name) {
					this.showModal(name);
				} else {
					this.modalName = null;
				}
			},
			loadExecution() {
				/**
				 * 获取本地存储中launchFlag的值
				 * 若存在，说明不是首次启动，直接进入首页；
				 * 若不存在，说明是首次启动，进入引导页；
				 */
				try {
					const value = uni.getStorageSync("wanlshop:launch");
					if (value || this.$store.state.common.adData.firstAdverts.length == 0) {
						if (value == true) {
							this.startTimer();
						} else {
							this.clearTimerGuide();
						}
					} else {
						uni.setStorage({
							key: "wanlshop:launch",
							data: true,
							success: (res) => {
								console.log("存储launchFlag");
							},
						});
						this.clearTimerGuide();
					}
				} catch (e) {
					// error
					uni.setStorage({
						key: "wanlshop:launch",
						data: true,
						success: (res) => {
							console.log("error时存储launchFlag");
						},
					});
					this.clearTimerGuide();
				}
				return;
				this.clearTimerIndex();
			},

			outBtn() {
				this.clearTimerIndex();
			},
			outImage() {
				this.clearTimerIndex();
			},
			handleShare() {},
			startTimer() {
				if (this.cTimer == null) {
					this.cTimer = setInterval(() => {
						this.countdown--;
						if (this.countdown == 0) {
							this.clearTimerIndex();
						}
					}, 1000);
				}
			},
			clearTimerIndex() {
				clearInterval(this.cTimer);
				this.cTimer = null;
				uni.switchTab({
					url: "/pages/index",
				});
			},
			clearTimerGuide() {
				uni.redirectTo({
					url: "/pages/guide",
				});
				clearInterval(this.cTimer);
				this.cTimer = null;
			},
		},
	};
</script>

<style lang="scss">
	.Menu {
		.menuContent {
			width: 100%;
			height: 92.5vh;
			background: #dfdfdf;
		}

		.footer {
			width: 90%;
			margin-left: 5%;
			height: 96rpx;
			background: #327CFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #ffffff;
			line-height: 36rpx;
			text-align: center;
			line-height: 96rpx;
			position: absolute;
			bottom: 40rpx;
		}

		.pays {
			width: 90%;
			margin-left: 5%;
			height: 96rpx;
			background: #327CFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #ffffff;
			line-height: 36rpx;
			text-align: center;
			line-height: 96rpx;
			margin-top: 114rpx;
			margin-bottom: 50rpx;
		}

		/deep/ .u-popup__content {
			border-radius: 20rpx 20rpx 0 0;
		}

		.buyimg {
			width: 238rpx;
			height: 238rpx;
			position: absolute;
			top: -110rpx;
			left: 36%;
			z-index: 9;
		}

		.close {
			width: 36rpx;
			height: 36rpx;
			position: absolute;
			right: 24rpx;
			top: 40rpx;
		}

		.buybox {
			min-height: 50rpx;
			padding-bottom: 0px;
			padding-bottom: env(safe-area-inset-bottom);

			.money {
				font-weight: 600;
				font-size: 60rpx;
				color: #327CFF;
				text-align: center;
				margin-top: 150rpx;
				margin-bottom: 80rpx;
			}

			.buylist {
				padding: 0 24rpx;
				display: flex;
				justify-content: space-between;
				font-size: 28rpx;
				margin-top: 40rpx;

				.pay {
					font-size: 40rpx;
				}
			}
		}
	}
</style>